<template>
    <div class="login-contain">
        <div class="login-box">
            <div class="login-logo">
                <img src="../assets/images/logo.png" alt="">
            </div>
            <div class="login-title">
                保税电商 <br/> 仓储管理系统
            </div>
            <div class="login-form">
                <el-input placeholder="请输入账号" v-model="loginData.userName" style="margin: 20px 0 "></el-input>
                <el-input placeholder="请输入密码" v-model="loginData.password" type="password"></el-input>
            </div>
            <div class="login-btn">
                <div class="btn" @click="getInhome">登 录</div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                loginData: {
                    userName: '',
                    password: ''
                },
            }
        },
        methods: {
            getInhome() {
                if (!this.loginData.userName) {
                    return this.$message.warning('请输入用户名')
                }
                if (!this.loginData.password) {
                    return this.$message.warning('请输入密码')
                }
                let obj = {
                    loginName: this.loginData.userName,
                    password: this.loginData.password
                }
                this.axios.post('/user/login', obj).then(res => {
                    if (res.data.code === 200) {
                        sessionStorage.setItem('user', JSON.stringify(res.data.data.user));
                        sessionStorage.setItem('tokenName', res.data.data.tokenInfo.tokenName);
                        sessionStorage.setItem('tokenValue', res.data.data.tokenInfo.tokenValue);
                        //菜单
                        sessionStorage.setItem("menuList", JSON.stringify(res.data.data.menuList));
                        //权限
                        sessionStorage.setItem("permissionList", res.data.data.permissionList);
                        this.$message.success('登陆成功')
                        this.$router.replace('/home')
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .login-contain {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #1abc9c;

        .login-box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            height: 600px;
            background-color: #fff;
            border-radius: 10px;
            padding: 20px 30px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;

            .login-logo {
                width: 70px;
                height: 68px;
                border-radius: 50%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .login-title {
                font-size: 25px;
                font-weight: bold;
                color: #1abc9c;
                text-align: center;
            }

            .login-form {
                width: 100%;

                /deep/ .el-input__inner {
                    border-radius: 0;
                    border: none;
                    border-bottom: 1px solid #ccc;
                }
            }

            .login-btn {
                width: 100%;
                height: 180px;
                display: flex;
                align-items: center;
                justify-content: center;

                .btn {
                    width: 70%;
                    height: 40px;
                    background-color: #1abc9c;
                    border-radius: 25px;
                    text-align: center;
                    line-height: 40px;
                    color: #fff;
                    font-size: 16px;
                    cursor: pointer;
                }
            }

        }
    }
</style>
